<template>
    <div class="MySpace">
        <el-container>
            <el-header>
                <div class="btns list-unselect" v-if="listSelect">
                    <el-space>
                        <el-button type="primary" :icon="Upload"  @click="upFormVisable = true">上传</el-button>
                        <el-button-group>
                            <el-button type="primary" :icon="FolderAdd" plain  >新建文件夹</el-button>
                            <el-button type="primary" :icon="Download" plain >离线下载</el-button>
                        </el-button-group>
                    </el-space>
                </div>
                <div class="btns list-select" v-if="!listSelect">
                    <el-space>
                        <el-button-group>
                            <el-button type="primary" :icon="Share" plain round >分享</el-button>
                            <el-button type="primary" :icon="Download" plain round>下载</el-button>
                            <el-button type="primary" :icon="Delete" plain round >删除</el-button>
                            <el-button type="primary" :icon="Edit" plain round>重命名</el-button>
                            <el-button type="primary" :icon="DocumentCopy" plain round >复制</el-button>
                            <el-button type="primary" :icon="Rank" plain round>移动</el-button>
                        </el-button-group>
                    </el-space>
                </div>
                <BreadCrumb></BreadCrumb>
            </el-header>

            <el-main>
                <ListSpace ref="listSpace" @refresh="switchListSelect"></ListSpace>
            </el-main>
        </el-container>
    </div>

    <!-- 上传弹出框 -->
    <el-dialog
        v-model="upFormVisable"
        title="上传文件"
        width="400px"
        :before-close="handleClose"
    >
        <!-- 上传界面 -->
        <el-upload
            drag
            action  
            class="upload-form"
            multiple
            :limit="10"
            :file-list="upFiles"
            :http-request="uploadFile"
            :auto-upload="false"
            ref="uploadRef"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                拖拽文件到此处 <em>点击上传</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                </div>
            </template>
        </el-upload>    

        <template #footer>
            <el-progress style="width: 200px;margin-top: 8px"  :percentage="progressPercent" />
            <el-button size="small" type="primary" @click="submitUpload"  :disabled="upBtnVisable">上传到服务器</el-button>
        </template>
    </el-dialog>

</template>

<script setup>
    import { ref  } from 'vue'
    import { ElMessageBox,ElMessage,ElNotification } from 'element-plus'
    import { Delete, Edit, DocumentCopy, Share, Upload, Download, FolderAdd, Rank , UploadFilled } from '@element-plus/icons-vue'
    import BreadCrumb from '@/components/MySpace/cpns/BreadCrumb.vue'
    import ListSpace from '@/components/common/ListSpace/ListSpace.vue'
    import { upFile } from '@/request/api'
    import { useStore } from 'vuex'

    const listSpace = ref()
    const uploadRef = ref()
    
    const store = useStore()
    //有无文件选中
    const listSelect = ref(true)
    //上传文件的交互窗口是否打开
    const upFormVisable = ref(false)
    //上传文件合集
    const upFiles = ref([])
    //上传进度条 默认为0
    const progressPercent = ref(0) 
    //上传服务器按钮是否可用
    const upBtnVisable = ref(false)

    //【子组件使用】 table顶部按钮切换 
    const switchListSelect =(len)=>{
        if(len > 0){
            listSelect.value = false
        }else{
            listSelect.value = true
        }
    }

    //关闭上传窗口
    const handleClose = () =>{
        upFormVisable.value = false
    }

    //上传文件自定义事件
    const uploadFile = (item) =>{
        ElMessage("上传中.....")

        upFile(item.file,store.state.cPath,{
            onUploadProgress: progressEvent => {
                progressPercent.value = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
            }}
        )
        .then(res =>{
            if(res.code == 200){
                ElMessage("上传成功")
                //更新列表
                listSpace.value.upList()
                setTimeout(() =>{
                    for(var i = 0;i < upFiles.value.length;i++){
                        if(upFiles.value[i].name == item.file.name){
                            upFiles.value.splice(i,1)
                        }
                    }
                },500)

            }else{
                setTimeout(() =>{
                    for(var i = 0;i < upFiles.value.length;i++){
                        if(upFiles.value[i].name == item.file.name){
                            upFiles.value.splice(i,1)
                        }
                    }
                },500)
                ElNotification({
                    title:"失败",
                    message:res.message,
                    type:"error"
                })
            }
            upBtnVisable.value = false

        })
    }

    //手动上传事件
    const submitUpload = () =>{
        if(upFiles.value.length > 0){
            uploadRef.value.submit()
            upBtnVisable.value = true
        }else{
            ElMessage("文件为空")
        }
    }
    
</script>

<style scoped>
.MySpace{
    background-color: white;
    padding-top: 15px;
    box-shadow: 8px 8px 16px 8px  #e9e9eb;
    border-radius: 8px;
    
}
.BreadCrumb{
    margin-top: 20px;
}
</style>